<template>
  <div class="page">
    <div class="main_wrapper">
      <slide-navigate></slide-navigate>
      <!--广告-->
      <banner></banner>
      <div class="feed" ref="main">
        <div v-for="i in 5" :key=i>
          <div class="feed_body_flex">
            <div class="woo_box_flex feed_head_wrapper">
              <img class="woo_avatar_img"
                   src="https://tvax4.sinaimg.cn/crop.0.0.828.828.180/007bMoU8ly8gnkgybbc8wj30n00n0gm2.jpg?KID=imgbed,tva&amp;Expires=1636538330&amp;ssig=%2Bz98R4IyUL">
              <div>
                <div class="username">hello</div>
                <span class="publish_time"
                      style="margin-right: 10px;color: #939393;font-size: 12px">2021-11-11 17:20</span>
                <span class="user_role" style="color: #939393;font-size: 12px">物业</span>
              </div>
            </div>
            <div class="feed_content_wrapper">
              <div class="subject">社区新闻</div>
              <div class="content">hello ...</div>
              <div class="comment_wrapper">
                <div class="comment_content_wrapper" v-for="i in 5" :key=i>
                  <img class="woo_comment_user_avatar_img"
                       src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKibpIaZuXjqic0dOC5Dz8xpBDQWOEXqicziaMrkepVIibvUKtc79nUujFUQVcISc21L6J1I0ibFsoAicmMw/132">
                  <div class="comment_text">
                    <div class="one_level_comment_text">我想租个房子</div>
                    <div class="woo_box_flex comment_toolbar_wrapper">
                    <span class="publish_time"
                          style="color: #939393;font-size: 12px">2021-11-11 17:20</span>
                      <img style="position: absolute;right: 50px" :src="icon_comment" @click="click($event,i)">
                      <img style="position: absolute;right: 0px" class="icon_like" :src="icon_like">
                    </div>
                    <div v-if="i%2==0" class="second_level_comment_text">
                      <div>看着还不错</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottom-bar></bottom-bar>
  </div>
</template>

<script>
import scroll from 'smoothscroll-polyfill'
import icon_comment from '@/assets/comment.svg'
import icon_like from '@/assets/like.svg'
import Banner from "@/components/Banner";
import SlideNavigate from "@/components/SlideNavigate";
import BottomBar from "@/components/UserCenter/BottomBar";

export default {
  name: "IndexComponent",
  components: {BottomBar, SlideNavigate, Banner},
  created() {
  },
  data() {
    return {
      focusId: 0,
      label: "帖子",
      message: "查询",
      icon_comment: icon_comment,
      icon_like: icon_like
    }
  },
  mounted() {
    scroll.polyfill();
  },
  methods: {
    click(event, index) {
      // this.getHeadBottom();
      this.message = "@who am " + index;
      let itemEle = event.target;
      let tag = itemEle.innerText
      console.log(itemEle)
      let top = this.$refs.main.scrollTop;
      if (top > 0) {
        console.log("允许滚动", top)
      } else {
        console.log("不需要滚动")
      }
      let input = document.getElementById('search-input');
      input.focus()
      setTimeout(() => {
        let currentClickEleBottom = itemEle.getBoundingClientRect().bottom;
        let searchInputTop = this.getSearchInputTop();
        let distance = searchInputTop - currentClickEleBottom;
        this.message = "@" + tag;
        this.scrollTo(distance);
      }, 600)

    }, scrollTo(distance) {
      let virtualBodyEle = document.querySelector(".virtual_body");
      let top = virtualBodyEle.scrollTop - distance;
      setTimeout(() => {
        virtualBodyEle.scrollTo({
          top: top,
          behavior: "smooth"
        })
      }, 100)
    },
    getSearchInputTop() {
      return this.$refs["search-input"].getBoundingClientRect().top;
    }
  }
}
</script>

<style scoped>
html, body {
  margin: 0;
  padding: 0;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.page {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}


.main_wrapper {
  overflow-y: scroll;
  width: 100%;
  height: 90vh;
  position: fixed;
}

.feed_body_flex {
  padding: 20px 2vw;
  width: 100%;
  border-bottom: 1px solid brown;
}

.woo_box_flex {
  display: flex;
}

.woo_avatar_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: center;
  margin-right: 10px;
}

.woo_comment_user_avatar_img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: center;
  margin-right: 10px;
}

.feed_content_wrapper {
  padding: 5px 20px;
}

.feed_content_wrapper .subject {
  margin-bottom: 5px;
  font-family: "Microsoft YaHei";
  color: midnightblue;
}


.comment_wrapper {
  margin-top: 30px;
  width: 100%;
  height: auto;
}

.comment_content_wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  margin-bottom: 20px;
}

.comment_text {
  width: 100%;
  margin-bottom: 3px;
  justify-content: start;
}

.one_level_comment_text {
  width: 100%;
}

.comment_toolbar_wrapper {
  position: relative;
  height: 25px;
  align-items: center;
}

.comment_toolbar_wrapper img {
  width: 18px;
}


.second_level_comment_text {
  margin-left: 20px;
}

.feed_toolbar_wrapper {
  padding: 0px 60px;
  height: 25px;
  align-items: center;
  justify-content: space-between;
}

.feed_toolbar_wrapper img {
  width: 18px;
}

.icon_like {
  position: relative;
  right: 0px;
}

.fixed_div_bottom {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 6vh;
  bottom: 0px;
  font-weight: bold;
  font-family: "Tahoma";
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.fixed_div_bottom input {
  color: brown;
  width: 100%;
  height: 5vh;
  line-height: 5vh;
  padding: 10px 20px 10px 20px;
  font-size: 10px;
  outline: none;
}
</style>